<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ajax demo</title>
    <script src="js/axios.min.js"></script>
    <script>
      function postAjax() {
        // 使用 XMLHttpRequest 对象发起 POST 请求
        // 1. 创建 XMLHttpRequest 对象
        const xhr = new XMLHttpRequest();
        // 2. 设置 onload 事件处理函数
        xhr.onload = function () {
          // 请求成功
          if (xhr.status === 200) {
            console.log(xhr.responseText);
          } else {
            console.log(xhr.status);
          }
        };
        // 3. 设置 onerror 事件处理函数
        xhr.onerror = function () {
          console.log("请求失败：发生网络错误");
        };
        // 4. 设置请求方法和 URL
        xhr.open("POST", "/api/register");
        // 让服务器理解发送的数据格式
        xhr.setRequestHeader(
          "Content-Type",
          "application/x-www-form-urlencoded"
        );
        // 5. 使用 send 方法发送请求
        xhr.send("username=test&password=1234&password2=1234&nickname=test");
      }

      // 使用第三方库 axios 发起 POST 请求
      async function register() {
        const response = await axios.post("/api/register", {
          username: "test",
          password: "<PASSWORD>",
          password2: "<PASSWORD>",
          nickname: "test",
        });
        const data = response.data;
        if (data.success) {
          alert("注册成功");
        } else {
        }
      }

      async function login() {
        // 获取表单数据
        const username = document.getElementById("username").value;
        const password = document.getElementById("password").value;
        // 使用 XMLHttpRequest 对象发起 POST 请求
        const data = await request("/api/login", {
          method: "POST",
          data: `username=${username}&password=${password}`,
        });
        if (data.success) {
          alert("登录成功");
        } else {
          // 动态构建 html 元素
          const p = document.createElement("p");
          // 使用 innerHTML 设置元素内容
          p.innerHTML = data.message;
          const msg = document.getElementById("msg");
          msg.appendChild(p);
        }
      }
      // 使用 Promise 封装 XMLHttpRequest 对象
      function request(url, options) {
        return new Promise((resolve, reject) => {
          const { method, data } = options;
          // 1. 创建 XMLHttpRequest 对象
          const xhr = new XMLHttpRequest();
          // 2. 设置 onload 事件处理函数
          xhr.onload = function () {
            // 请求成功
            if (xhr.status === 200) {
              resolve(JSON.parse(xhr.responseText));
            } else {
              resolve(xhr.status);
            }
          };
          // 3. 设置 onerror 事件处理函数
          xhr.onerror = function () {
            reject(new Error("请求失败：发生网络错误"));
          };
          // 4. 设置请求方法和 URL
          xhr.open(method, url);
          // 让服务器理解发送的数据格式
          xhr.setRequestHeader(
            "Content-Type",
            "application/x-www-form-urlencoded"
          );
          // 5. 使用 send 方法发送请求
          xhr.send(data);
        });
      }
      // 使用 fetch 发起 POST 请求
      async function loginWithFetch(e) {
        // 获取表单数据
        e.preventDefault(); // 取消默认行为
        // this 指向表单元素
        const username = this.username.value;
        const password = this.password.value;
        // fetch 是 html5 新增的 API
        const response = await fetch("/api/login", {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          body: "username=" + username + "&password=" + password,
        });
        const data = await response.json();
        if (data.success) {
          alert("登录成功");
        } else {
          const p = document.createElement("p");
          p.innerHTML = data.message;
          const msg = document.getElementById("msg");
          msg.appendChild(p);
        }
      }

      async function onRegister(e) {
        // 取消默认行为
        e.preventDefault();
        // 获取表单数据
        const formData = new FormData(this);
        const values = Object.fromEntries(formData.entries());
        const response = await axios.post("/api/register", values);
        const data = response.data;
        if (data.success) {
          alert("注册成功");
        } else {
          const p = document.createElement("p");
          p.innerHTML = data.message;
          const msg = document.getElementById("msg");
          msg.appendChild(p);
        }
      }
      window.onload = () => {
        const form = document.querySelector("form");
        form.addEventListener("submit", loginWithFetch);
        // 注册表单
        const registerForm = document.querySelector("#register");
        registerForm.addEventListener("submit", onRegister);
      };
    </script>
    <link rel="stylesheet" href="css/pico.min.css" />
  </head>
  <body>
    <main class="container">
      <button onclick="postAjax()">发起 Ajax 请求</button>
      <button onclick="register()">注册</button>
      <button onclick="login()">登录</button>
      <div id="msg"></div>
      <div>
        <form>
          <h2>用户登录</h2>
          <div>
            <label for="username">用户名</label>
            <input type="text" name="username" id="username" value="admin" />
          </div>
          <div>
            <label for="password">密码</label>
            <input
              type="password"
              name="password"
              id="password"
              value="123456"
            />
          </div>

          <button>登录</button>
        </form>

        <form id="register">
          <h2>用户注册</h2>
          <div>
            <label for="username">用户名</label>
            <input type="text" name="username" id="username" />
          </div>
          <div>
            <label for="password">密码</label>
            <input type="password" name="password" id="password" />
          </div>
          <div>
            <label for="password2">确认密码</label>
            <input type="password" name="password2" id="password2" />
          </div>
          <div>
            <label for="nickname">昵称</label>
            <input type="text" name="nickname" id="nickname" />
          </div>
          <div></div>
          <button>注册</button>
        </form>
      </div>
    </main>
  </body>
</html>
